<template>
    <div id="oppo_drawer">
        <div class="drawertle">
            <el-row style="padding:10px  15px">
                <el-col :span="22">{{oppotunity.customer.customerName}}</el-col>
                <el-col :span="2" class="more">
                    <el-dropdown :hide-on-click="false" trigger="click" @command="handleCommand">
						<span class="el-dropdown-link">
							<i class="iconfont icon-m-weixinwenzhang"></i>
						</span>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item command="a">查看</el-dropdown-item>
                            <el-dropdown-item command="b">编辑</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </el-col>
            </el-row>
        </div>
        <el-tabs type="card" v-model="activeName" class="taps-change tryy" style="padding: 10px 15px 0px">
            <el-tab-pane label="行动内容" name="first">
                <el-form :model="ruleForm" :rules="ruleForm" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                    <el-form-item prop="actionType.actionTypeId" label-width="0">
                        <!-- 选择行动类型 -->
                        <el-select v-model="action.actionType" value-key="actionTypeId" placeholder="请选择行动类型" >
                            <!--key是循环的标准，lable是渲染出的值，v-model拿到value中的值-->
                            <el-option  v-for="item in actiontypes"  :key="item.actionTypeId"  :label="item.actionTypeName" :value="item"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label-width="0" prop="contact.contactId">
                        <el-select v-model="action.contact" value-key="contactId" placeholder="请选择联系人" width="100%">
                            <!--key是循环的标准，lable是渲染出的值，v-model拿到value中的值-->
                            <el-option  v-for="item in hisLinkMan"  :key="item.contactId"  :label="item.contactName" :value="item"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item style="height: 110px" label-width="0">
                        <el-input type="textarea" :rows="4" placeholder="快速记录客户的行动内容" width="100%"></el-input>
                        <div class="reprecord">
                            <el-tag
                                    v-for="tag in behaRecordList"
                                    :key="tag.behaviorName"
                                    closable
                                    type="success"
                                    @close="deltag(tag)"
                            >
                                {{tag.behaviorName}}
                            </el-tag>
                        </div>
                        <!--客户行为选择按钮-->
                        <el-button class="record"  type="text"   @click="addAction()"><i class="iconfont icon-lianluojilu"></i></el-button>
                    </el-form-item>
                    <div style="clear:both;"></div>
                    <!--选择下次联系时间-->
                    <el-form-item prop="nextdate" label-width="0">
                        <div class="check-sty">
                            <el-checkbox  label="暂不联系" v-model="checked1" @change="disContact"></el-checkbox>
                        </div>
                        <div class="riqi-sty">
                            <el-date-picker
                                    :disabled="checked1"
                                    value-format="yyyy-MM-dd"
                                    style="width: 130px;font-size: 12px"
                                    v-model="nextContacDate"
                                    type="date"
                                    placeholder="下次联系日期">
                            </el-date-picker>
                        </div>
                        <div class="riqi-sty">
                            <el-time-picker
                                    :disabled="checked1"
                                    value-format="hh:mm:ss"
                                    style="width: 130px"
                                    v-model="nextContacHour"
                                    :picker-options="{
                                            selectableRange: ''
                                        }"
                                    placeholder="下次联系时间">
                            </el-time-picker>
                        </div>
                    </el-form-item>
                    <div style="clear:both;"></div>
                    <el-form-item>
                        <!--弹出记录详细信息的框-->
                        <el-button type="primary" @click="openSaveDetailRecordDialogVisible" style="margin-left: -105px;background-color: rgb(91,192,222)">
                            添加详细的联系内容
                        </el-button>
                        <el-button type="primary" @click="submitForm(ruleForm)" style="margin-left: 70px;background-color: rgb(48,113,169)">保存</el-button>
                    </el-form-item>
                    <el-dialog  v-dialogDrag :modal="false" title="客户行为" :visible.sync="actionVisible"  width="35%" >
                        <div style="margin-top: 10px">
                            <el-tag style="margin-top: 10px" v-for="item in behaviors" :key="item.behaviorId" @click="tagClick(item)" :style="{'background-color':item.behaviorScore < 0 ? 'rgb(245,108,108)':item.behaviorScore < 7 ? 'rgb(230,162,60)':'rgb(103,194,58)'}">
                                <span style="color:white">{{item.behaviorName}}({{item.behaviorScore}})</span>
                            </el-tag>
                        </div>
                        <span slot="footer" class="dialog-footer">
                                <el-button @click="actionVisible = false">取 消</el-button>
                                <el-button type="primary" @click="actionVisible = false">确 定</el-button>
                            </span>
                    </el-dialog>
                </el-form>
            </el-tab-pane>
            <el-tab-pane label="报价产品" name="secondoppo">
                <div style="margin:5px">
                    <div class="actP" v-for="pro in oppotunity.oppoProList" :key="pro.detailOfferId">
                        <table>
                            <tbody>
                            <tr>
                                <td rowspan="3" class="pi">
                                    <el-image :src="pro.productDetail.proImgSrc"></el-image>
                                </td>
                                <td colspan="2" class="pn">
                                    {{pro.productDetail.product.proClassily.proClassilyName}}
                                    <i class="fa fa-angle-right"></i>
                                    {{pro.productDetail.product.productName}}
                                </td>
                            </tr>
                            <tr>
                                <td style="width: 50%;">数量：{{(pro.productNum)}}</td>
                                <td>报价：{{pro.offer}}</td>
                            </tr>
                            <tr>
                                <td>盈利：{{(pro.offer - pro.productDetail.proPrice) * pro.productNum}}</td>
                                <td>总额：{{pro.offer * pro.productNum}}</td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </el-tab-pane>
            <el-tab-pane label="机会详情">
                <el-form
                        label-width="125px"
                        class="demo-ruleForm save_contract_form"
                        style="overflow:hidden;padding-top:20px"
                >
                    <el-form-item label="机会名称：" prop="name">
                        {{oppotunity.oppoName}}
                    </el-form-item>
                    <el-form-item label="对应客户：" prop="name">
                        {{oppotunity.customer?oppotunity.customer.customerName:"无"}}
                    </el-form-item>
                    <el-form-item label="当前状态：" prop="region">
                        {{oppotunity.state?oppotunity.state.oppoStateName:"无"}}
                    </el-form-item>
                    <el-form-item label="推进到当前阶段时间：" prop="region">
                        {{oppotunity.stateDate?oppotunity.stateDate:"无" | formatDate}}
                    </el-form-item>
                    <el-form-item label="预计成交时间：" prop="region">
                        {{oppotunity.planIdealTime?oppotunity.planIdealTime:"无" | formatDate}}
                    </el-form-item>
                    <el-form-item label="总金额：" prop="name">
                        {{totalPrice}}
                    </el-form-item>
                    <el-form-item label="盈利：" prop="name">
                        {{profit}}
                    </el-form-item>
                </el-form>
            </el-tab-pane>
        </el-tabs>
        <!--        添加详细行动记录的表单-->
        <el-dialog
                title="行动记录"
                :visible.sync="saveDetailRecordDialogVisible"
                width="60%">
            <add-actform></add-actform>
        </el-dialog>
    </div>
</template>

<script>
    import {formatTimeToStr} from "../../assets/format";
    export default {
        name: "oppoDrawer",
        props:["oppotunity"],
        components:{},
        data:function () {
            return{
                actiontypes:[],        //员工行动类型数据源
                hisLinkMan:[],          //其的联系人
                behaviors:[],
                action:{
                    actionDetail:'',
                    actionType:[],
                    contact:{               //联系人
                        contactName:''
                    },
                    isContact:1,          //是否联系
                    actionDate:new Date(),
                    nextContactTime:'1997-01-01 00:00:00',
                    behaviorRecordList:[],//客户行为
                    emp:{},           // 业务员
                },
                actionVisible:false,
                activeName:"first",
                //抽屉内文本框内容
                textarea:"",
                input: '',
                //复选框是否被勾中
                checked1:false,
                //日期选择器
                value1: '',
                disabled1:false,
                //时间选择器
                value2:'',
                behaRecordList:[],//暂存客户行为
                nextContacDate:'',//下次联系日期
                nextContacHour:'',//下次联系时间
                ruleForm:{
                    "actionType.actionTypeId":[
                        {required: true, message: '请选择行动类型', trigger: 'blur'}
                    ],
                    "contact.contactId":[
                        {required: true, message: '联系人不能为空', trigger: 'blur'}
                    ],
                }
            }
        },
        methods:{
            //下拉菜单的方法
            // 更多的下拉菜单
            handleCommand(command) {
                if (command == 'a'){
                    sessionStorage.setItem("oppotunity", JSON.stringify(this.oppotunity))
                    this.$router.push({path:"/oppo-detail"})
                }else if (command == 'b') {
                    // 打开新增弹框		编辑
                    this.$parent.$parent.saveOppoDialogVisible = true
                    setTimeout(() => {
                        // 拷贝一个合同临时对象
                        let _oppotunity = this.global.copy_obj(this.oppotunity)
                        // 赋值对象
                        this.$parent.$parent.$refs.refSaveOppo.addOppoForm = _oppotunity
                    }, 50);
                }
            },

            addAction(){
                this.actionVisible = true
            },
            //点击暂不联系
            disContact(){
                if(this.checked1){
                    this.action.isContact = 0
                    this.nextContacDate = ''
                    this.nextContacHour = ''
                }else {
                    this.action.isContact = 1
                }
            },
            //点击客户行为标签
            tagClick(behavior){
                //!!!!!!!!!!!!!
                this.behaRecordList.push(behavior) //存入客户行为
            },
            //删除客户行为标签
            deltag(tag){
                this.behaRecordList.splice(this.behaRecordList.indexOf(tag), 1);

            },
            //弹出添加详细框方法
            openSaveDetailRecordDialogVisible(){
                this.$parent.$parent.saveDetailRecordDialogVisible = true;
            },
            get_actType(){
                this.axios.get("api/actrecord/getactType",{params:{}})
                    .then(v=>{
                        this.actiontypes = v.data;
                    }).catch(()=>{
                    this.global.mes_error("获取行动类型数据失败！")
                })
            },
            //查询该客户所有联系人
            get_hisContact(){
                window.console.log(this.oppotunity.customer.customerId)
                this.$axios.get("api/customer/hisLinkMan",{params:{"customerId":this.oppotunity.customer.customerId}})
                    .then(v => {
                        this.hisLinkMan = v.data;
                    }).catch(()=>{
                    this.global.mes_error("获取联系人数据失败！")
                })
            },
            //获取客户行为类型
            get_behaviorType(){
                this.axios.get("api/actrecord/getBehaviorType")
                    .then(v=>{
                        this.behaviors = v.data;
                    }).catch(()=>{
                    this.global.mes_error("获取客户行为类型数据失败！")
                })
            },
            submitForm(formName){
                this.$refs[formName].validate((valid) => {
                    if (valid){
                        let obj = {}
                        this.action.emp = this.$store.state.user
                        if(this.nextContactTime != null && this.nextContactTime != ''){
                            this.action.nextContactTime =this.nextContactTime
                        }
                        this.behaRecordList.forEach(beh=>{
                            obj.behavior = beh;
                            obj.customer = this.customer;
                            this.action.actionDetail = this.action.actionDetail + beh.behaviorName+";";
                            this.action.behaviorRecordList.push(obj);
                        })
                        this.axios.post("api/actrecord/saveactRecort",this.action)
                            .then(v=>{
                                window.console.log(v)
                                this.action={
                                    actionType:{},
                                    isContact:1,          //是否联系
                                    actionDate:new Date(),
                                    nextContactTime:'1997-01-01 00:00:00',
                                    behaviorRecordList:[],//客户行为
                                    contact:{               //联系人
                                        contactName:''
                                    },
                                    emp:{},           // 业务员
                                }
                            }).catch(err=>{
                            window.console.log(err)
                        })
                    }else{
                        this.global.mes_error("数据错误，提交失败")
                        return false;
                    }
                });
            },
        },
        filters: {
            formatDate: function(time) {
                if(time!=null&&time!="")
                {
                    var date = new Date(time);
                    return formatTimeToStr(date, "yyyy-MM-dd");
                }else{
                    return "";
                }
            }
        },
        computed:{
            nextContactTime(){//下次回访时间
                return new Date(this.nextContacDate +' '+ this.nextContacHour);
            },
            profit(){
                let p = 0;
                this.oppotunity.oppoProList.forEach(pro=>{
                    p = p + (pro.offer - pro.productDetail.proPrice) * pro.productNum
                });
                return p
            },
            totalPrice(){
                let t = 0;
                this.oppotunity.oppoProList.forEach(tol=>{
                    t = t + (tol.productNum * tol.offer)
                });
                return t;
            }
        },
        created:function(){
            this.get_hisContact();
            this.get_actType();
            this.get_behaviorType();
        },
    }
</script>

<style scoped>
    /*抽屉里input样式*/
    .tryy .el-select{width:100% !important;}
    /*图标样式*/
    .icon-sty{font-size: 15px;padding-right: 3px;}
    /*抽屉里的选框样式*/
    .check-sty{background-color: rgb(247,247,247);padding-left: 7px;padding-right: 5px;border: 1px solid rgb(204,204,204);border-right: 0px;float: left}
    .riqi-sty{float: left;}
    /*调整抽屉里日期input的高度*/
    .el-input__inner{height: 42px !important;}
    .more{font-size: 16px;color: black;line-height: 21px}
    /* 调整日期选择器格式*/
    .el-input__prefix i{font-size: 0px}
    .el-input--prefix .el-input__inner{padding-left: 5px !important;}
    /*抽屉里按钮颜色*/
    .el-button--primary{border: 0px solid !important;}
    .drawer-input .el-form-item{width: 100% !important;padding-bottom: 22px}
    .drawer-input .el-select input[type="text"]{border: 1px solid rgb(220,223,230) !important;}
    /*改变抽屉内tap的格式*/
    .nav_but .el-button{padding: 0px}
    .drawertle{height: 40px;line-height: 40px;font-size: 15px;margin-left: 15px}
    .actP {border-radius: 10px;border: solid 1px #dedede;padding: 10px;margin-bottom: 10px;}
    .actP table {width: 100%;background-color: transparent;border-spacing: 0;border-collapse: collapse;border-width: 0;}
    table td {padding: 5px;}
    .actP .pi {vertical-align: top;}
    .actP .el-image {width: 40px;height: 40px;border-radius: 50%;vertical-align: middle;border: 0;}
    .actP .pn {border-bottom: #ddd 1px solid;font-size: 1.2em;font-weight: bold;}
    .actP .pn i {padding: 0px 6px;}
    .reprecord{position: absolute;top:2px;left:2px;}
    .record{position: absolute;bottom:0px;right:-5px;}
</style>